<template>
    <div v-show="message" style="overflow-x: hidden;">
        <div class="content-top">
            <div class="top-a">
                <p class="top-p1">{{$t("common.zongzichan")}}<img @click="change" src="../assets/images/zc1.png" alt=""></p>
                <p class="top-p1"><img src="../assets/images/zc2.png" alt="" @click="goHistory" class="top-img"></p>
            </div>
            <div class="top-b">
                <p class="top-p2">{{getIsEncryption ? '*****' :($formatMoney(message.totalAssets,2) || 0)}}</p>
                <span>USDT</span>
            </div>
        </div>
        <div class="content-center">
            <div class="center-a" @click="fn1">{{$t("common.chongzhi")}}</div>
            <div class="xian"></div>
            <div class="center-b" @click="fn2">{{$t("common.tixian")}}</div>
            <div class="xian"></div>
            <div class="center-c" @click="fn3">{{$t("common.huazhuan")}}</div>
        </div>
        <div class="bottom">
            <div class="bottom-a">
                <p>{{$t("common.zichanliebiao")}}</p>
            </div>
            <div v-for="(item,index) in message.assetList" :key="index">
                 <div class="bottom-b">
                <p class="p1">
                    <img src="../assets/images/zjzh.png" alt="">
                    <span>USDT</span>
                </p>
                <p class="p2">{{getIsEncryption ? '*****' :($formatMoney((+item.available + +item.frozen),2) || 0)}}</p>
            </div>
            <div class="bottom-c">
                <div class="c-top">
                    <p class="p1">{{$t("common.keyong")}}</p>
                    <p class="p2">{{$t("common.dongjie")}}</p>
                </div>
                <div class="c-bottom">
                    <p class="p1">{{getIsEncryption ? '*****' :($formatMoney(item.available,2) || 0)}}</p>
                    <p class="p2">{{getIsEncryption ? '*****' :($formatMoney(item.frozen,2) || 0)}}</p>
                </div>
            </div>
            </div>
        </div> 
    </div>    
</template>
<script>
import { mapGetters } from "vuex";

export default {
    props: {
      message: {
        type: Object
      },
      encryptionChange: {
        type: Function,
        default: null
      }
    },
  computed: {
    ...mapGetters(["getIsEncryption"]),
  },
    data(){
        return {
            hideMessage:false
        }
    },
    created(){
    },
    methods:{
        fn1(){
            localStorage.setItem("zh",1);
            this.$router.push('/recharge');
        },
        fn2(){
            localStorage.setItem("zh",1);
            this.$router.push('/withdrawal');
        },
        fn3(){
            localStorage.setItem("zh",1);
            this.$router.push('/transfer');
        },
        goHistory(){
            localStorage.setItem("zh",1);
            this.$router.push('/history');
        },
      change(){
        this.$store.commit('changeIsEncryption')
      },
    }
}
</script>

<style scoped lang="scss">
    .content-top{
        height: 35vw;
        width: 100vw;
        background-color: #090A1B;;
        .top-a{
            height: 17vw;
            display: flex;
            justify-content: space-between;
            font-size: 3.7vw;
            margin: 0 3.4vw;
            color: rgba(135, 139, 151, 100);
            background-color: #090A1B;
            .top-p1{
                margin-top: 6.4vw;
                img{
                    margin-left: 1.06vw;
                    position: relative;
                    top: 0.5vw;
                    height: 3.73vw;
                    width: 3.73vw;
                }
                .top-img{
                    height: 5.33vw;
                    width: 5.33vw;
                }
            }
        }
        .top-b{
            height: 18vw;
            background-color: #090A1B;
            display: flex;
            font-weight: 600;
        }
        .top-p2{
            font-size: 6.6vw;
            margin-left: 3.4vw;
            color: rgba(214, 214, 214, 100);
            margin-top: 3vw;

        }
        span{
            height: 5vw;
            font-size: 3.7vw;
            position: relative;
            top: 5.6vw;
            left: 2.1vw;
            color: rgba(214, 214, 214, 100);
            }        
    }
    .content-center{
        width: 100vw;
        background-color: rgb(32 34 51);
        border-radius: 0px 0px 1.3vw 1.3vw;
        display: flex;
        flex: 1;
        justify-content: space-around;
        align-items: center;
        font-size: 3.7vw;
        color: rgba(214, 214, 214, 100);
        div{
            height: 10.13vw;
            line-height: 10.13vw;
        }
        .center-a{
            width: 33.3vw;
            // border-right: 0.26vw solid rgba(79, 82, 93, 100);
        }
        .center-b{
            width: 33.3vw;
            // border-right: 0.26vw solid rgba(79, 82, 93, 100);
        }
        .center-c{
            width: 33.3vw; 
        }
        .xian{
            width: .26vw;
            height: 4vw;
            background-color: rgba(79, 82, 93, 100);
        }
    }
    .bottom{
        margin-top: 1.6vw;
        background-color: #090A1B;
        height: 142vw;
        .bottom-a{
            height: 18.4vw;
            color: rgba(135, 139, 151, 100);
            font-size: 4.26vw;
            text-align: left;
            font-family: PingFangSC-regular;
            p{
                position: relative;
                top: 6.4vw;
                margin-left: 3.46vw;
            }
        }
        .bottom-b{
            height: 5.3vw;
            width: 92vw;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .p1{
                margin-top: 0.5vw;
                span{
                    position: relative;
                    top: -1vw;
                    left: 2.13vw;
                    font-size: 3.73vw;
                    letter-spacing: 0.2vw;
                }
                img{
                    position: relative;
                    top: -0.4vw;
                    width: 4.26vw;
                    height: 4.26vw;
                }
            }
            .p2{
                margin-top: 0.5vw;
                height: 5.33vw;
                color: rgba(255, 255, 255, 100);
                font-size: 3.73vw;
                font-family: PingFangSC-regular;
                letter-spacing: 0.2vw;
                font-weight: 600;
            }
        }
        .bottom-c{
            position: relative;
            top: 2.4vw;
            height: 38px;
            width: 325px;
            margin: 0 13px 0 37px;
            letter-spacing: 0.2vw;
            .c-top{
                display: flex;
                justify-content: space-between;
                font-family: PingFangSC-regular;
                .p1{
                    font-size: 3.2vw;
                    color: rgba(135, 139, 151, 100);
                }
                .p2{
                    // margin-top: 1.3vw;
                    color: rgba(135, 139, 151, 100);
                    font-size: 3.2vw;
                }
            }
            .c-bottom{
                display: flex;
                justify-content: space-between;
                font-family: PingFangSC-regular;
                font-weight: 600;
                .p1{
                    font-size: 3.1vw;
                    
                    margin-top: 1.3vw;
                    color: #fff;
                }
                .p2{
                    margin-top: 1.3vw;
                    color: #fff;
                    font-size: 3.1vw;
                }
            }
        }
    }

</style>
